<template>
  <div class="video_wrap">
    <el-button type="success"
               :disabled="vbtnFlag"
               @click="addVideoApi">添加视频</el-button>
    <el-table border
              stripe
              :data="dirVideo">
      <el-table-column label="视频名称"
                       prop="Vname"></el-table-column>
      <el-table-column label="视频时长"
                       prop="Vtime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-link type="danger"
                     @click="delDirVi(scope.row._id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="选择视频"
               @close="diaclose"
               :visible.sync="this.$store.state.VideoStore.addVideoFlag">
      <!--  视频模块组件-->
      <!--did目录_id
        CDid 课程_id -->
      <video-com :did="_id"
                 :CDid="cid"></video-com>
    </el-dialog>
  </div>
</template>

<script>
import videoCom from '../video/index.vue'
import { delDirVideo, getDirVideo } from '../../api/course'
export default {
  name: 'Ljfvue2011Addvideo',
  components: { videoCom },
  provide () {
    return {
      myflag: true
    }
  },
  data () {
    return {
      vbtnFlag: true,//按钮的禁用
      vflag: false,
      dirVideo: [],
      _id: "",
      cid: "", //课程的_id
    };
  },
  beforeMount () {
    // 接受到目录_id
    this.$bus.$on("senddirid", (_id, videolist) => {
      this.vbtnFlag = false;//打开按钮
      console.log(_id)
      this._id = _id //目录id
      this.dirVideo = videolist;//接受视频列表
      console.log(this.dirVideo)
      this.cid = this.$route.query._cid //课程_id
    })
    // 接受子辈组件传来的数据
    this.$bus.$on("sendvideodata", (video) => {
      console.log(video)
      this.dirVideo = video;
    })
  },
  mounted () {

  },
  beforeUpdate () {

  },
  methods: {
    async delDirVi (_id) { //删除目录下的视频
      var res = await delDirVideo({
        CDid: this.$route.query._cid,//课程的_id 
        _id: this._id,//目录id 
        Vid: _id//当前要删除的视频_id
      })
      // 删除视频后 从新获取目录下的视频
      var vres = await getDirVideo({
        CDid: this.$route.query._cid, //课程_id
        _id: this._id //目录_id
      })
      this.$message({
        message: "删除视频成功",
        type: "success"
      })
      this.dirVideo = vres.data.data.list;
    },
    diaclose () {
      console.log(99999)
      this.$store.commit("VideoStore/closeVideo", false)
    },
    addVideoApi () {
      this.$store.commit("VideoStore/closeVideo", true)
    }
  },
};
</script>

<style lang="less" scoped>
.video_wrap {
  padding: 0 40px;
  box-sizing: border-box;
  .el-button {
    margin: 20px auto;
  }
}
</style>